/**
 * Created by liubin on 2015/10/08.
 */
'use strict';

import React from 'react';
import { Link } from 'react-router';
import ReactMixin from 'react-mixin';
import Autobind from 'tools/autobindMixin';
import $ from 'jquery';
import vex from 'vex';
/**
 * 权限页面
 * 设置页面事件自动绑定this
 */
@ReactMixin.decorate(Autobind)
class RoleList extends React.Component {
    // 显示名
    static displayName = 'RoleList';
    static propTypes = {
        history: React.PropTypes.object.isRequired,
        roleActions: React.PropTypes.object
    }
    handleAdd() {
        console.log('handleAdd');
        const { history } = this.props;
        history.pushState(null, '/role/add');
    }
    handleView(data) {
        console.log('handleView');
        const { history } = this.props;
        history.pushState(null, `/role/${data.id}`);
    }
    handleDelete(data) {
        const { roleActions: { removeRole } } = this.props;
        console.log('handleDelete');
        console.log(data);
        vex.dialog.confirm({
            message: '确定要删除选中记录吗?',
            callback: value => {
                if (value) {
                    // 删除
                    removeRole(data.id, () => {
                        const table = $(React.findDOMNode(this.refs.table)).DataTable();
                        table.ajax.reload();

                    });
                }
            }
        });

    }
    componentDidMount() {
        const { roleActions: { selectRoleListPaging } } = this.props;
        $(React.findDOMNode(this.refs.table))
            .addClass('nowrap')
            .dataTable({
                language: {
                    url: window.staticUrl + 'locales/app/ch/dataTables.cn.lang'
                },
                //dom: 'frtip',
                dom: '<"row"<"#dt-toolbar.col-xs-6"><"col-xs-6"f>r>' +
                    't' +
                    '<"row"<"col-xs-6"i><"col-xs-6"p>>',
                iDisplayLength:20,
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: selectRoleListPaging,
                columns: [{
                    data: 'id'
                },{
                    data: 'code'
                },{
                    data: 'name'
                },{
                    data: 'op',
                    orderable: false
                }],
                order: [],
                createdRow: (row, data, index) => {
                    console.log(row);
                    console.log(data);
                    console.log(index);
                    React.render(
                        <div>
                            <Button bsStyle='primary' onClick={ this.handleView.bind(this, data) }>编辑</Button>{' '}
                            <Button bsStyle='danger' onClick={ this.handleDelete.bind(this, data) }>删除</Button>
                        </div>,
                      row.childNodes.item(3)
                    );
                },
                initComplete:()=> {
                    React.render(
                      <Button bsStyle='success' onClick={ this.handleAdd }>新增</Button>,
                      document.getElementById('dt-toolbar')
                    );
                }
            }
        );
    }
    render(){
        return (
           <Grid>
                <Row>
                    <Col sm={12}>
                        <Breadcrumb>
                            <BLink><Link to='/'>主页</Link></BLink>
                            <BLink active>权限</BLink>
                        </Breadcrumb>
                        <PanelContainer plain className='plain-panel' controlStyles='bg-blue fg-white'>
                            <PanelHeader className='bg-blue fg-white'>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <h4>权限一览</h4>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelHeader>
                            <PanelBody style={{paddingBottom: 10}}>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <Table ref="table" className='display' cellSpacing='0' width='100%'>
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>编码</th>
                                                        <th>名称</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                            </Table>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelBody>
                        </PanelContainer>
                    </Col>
                </Row>
           </Grid>
        );
    }
}
export default RoleList;